<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="150px"
    class="demo-ruleForm"
  >
    <el-form-item label="所属单位" prop="depId" class="demo-ruleForm-item">
      <el-select
        v-model="ruleForm.depId"
        placeholder="请选择"
        @change="depIdChange"
        :disabled="localTypeUnit != '1'"
      >
        <el-option
          v-for="item in depIdList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="设备名称"
      prop="facilityName"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.facilityName" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="设备分类"
      prop="facilitySort"
      class="demo-ruleForm-item"
    >
      <el-select v-model="ruleForm.facilitySort" placeholder="请选择">
        <el-option
          v-for="item in facilitySortList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="设备分级"
      prop="facilityLevel"
      class="demo-ruleForm-item"
    >
      <el-select v-model="ruleForm.facilityLevel" placeholder="请选择">
        <el-option
          v-for="item in facilityLevelList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="规格型号"
      prop="specificationModel"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.specificationModel" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="设备序列号"
      prop="facilitySerialNumber"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.facilitySerialNumber" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="设备地点"
      prop="facilityLocations"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.facilityLocations" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="资产编号"
      prop="assetNumber"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.assetNumber" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="数量"
      prop="facilityNumbers"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.facilityNumbers" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="单位" prop="unit" class="demo-ruleForm-item">
      <el-input v-model="ruleForm.unit" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="设备状态"
      prop="facilityState"
      class="demo-ruleForm-item"
    >
      <el-select v-model="ruleForm.facilityState" placeholder="请选择">
        <el-option
          v-for="item in facilityStateList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="供应商/厂家"
      prop="facilitySupplier"
      class="demo-ruleForm-item"
    >
      <el-input v-model="ruleForm.facilitySupplier" placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="是/否纳入特许经营权"
      prop="franchising"
      class="demo-ruleForm-item"
    >
      <el-select v-model="ruleForm.franchising" placeholder="">
        <el-option label="是" value="是" />
        <el-option label="否" value="否" />
      </el-select>
    </el-form-item>
    <el-form-item
      label="采购价格"
      prop="purchasePrice"
      class="demo-ruleForm-item"
    >
      <el-input
        v-model="ruleForm.purchasePrice"
        style="width: 168px"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item
      label="采购时间"
      prop="purchaseTime"
      class="demo-ruleForm-item"
    >
      <el-date-picker
        v-model="ruleForm.purchaseTime"
        type="date"
        placeholder="请选择"
        clearable
        style="width: 168px"
      />
    </el-form-item>
    <el-form-item
      label="开始使用时间"
      prop="startTime"
      class="demo-ruleForm-item"
    >
      <el-date-picker
        v-model="ruleForm.startTime"
        type="date"
        placeholder="请选择"
        clearable
        style="width: 168px"
      />
    </el-form-item>
    <el-form-item
      label="保修期限"
      prop="guaranteeTime"
      class="demo-ruleForm-item"
    >
      <el-date-picker
        v-model="ruleForm.guaranteeTime"
        type="date"
        placeholder="请选择"
        clearable
        style="width: 168px"
      />
    </el-form-item>
    <el-form-item label="报废期限" prop="scrapTime" class="demo-ruleForm-item">
      <el-date-picker
        v-model="ruleForm.scrapTime"
        type="date"
        placeholder="请选择"
        clearable
        style="width: 168px"
      />
    </el-form-item>
    <el-form-item label="是否联网" prop="networking" class="demo-ruleForm-item">
      <el-select v-model="ruleForm.networking" placeholder="">
        <el-option label="是" value="是" />
        <el-option label="否" value="否" />
      </el-select>
    </el-form-item>
    <el-form-item
      label="主要技术参数"
      prop="technicalParameter"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.technicalParameter"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
    </el-form-item>
    <el-form-item
      label="主要零部件及参数"
      prop="partsParameters"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.partsParameters"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
    </el-form-item>
    <el-form-item
      label="使用/安装说明书"
      prop="instructionManual"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.instructionManual"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'instructionManualPath');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'instructionManualPath')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="设备操作规程"
      prop="operatingProcedure"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.operatingProcedure"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'operatingProcedurePath');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'operatingProcedurePath')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="维修记录"
      prop="maintenanceRecord"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.maintenanceRecord"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'maintenanceRecordPath');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'maintenanceRecordPath')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="安装程序"
      prop="facilityInstaller"
      class="demo-ruleForm-item-long"
    >
      <el-input
        v-model="ruleForm.facilityInstaller"
        placeholder="请输入"
        style="width: 368px; margin-right: 10px"
      />
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'facilityInstallerPath');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'facilityInstallerPath')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="设备二维码"
      prop="twoDimensionalCode"
      class="demo-ruleForm-item-long"
    >
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'twoDimensionalCode');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'twoDimensionalCode')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="设备照片"
      prop="ficilityPhoto"
      class="demo-ruleForm-item-long"
    >
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'ficilityPhoto');
          }
        "
        :limit="1"
        :before-remove="(res) => handleExcelImportRemove(res, 'ficilityPhoto')"
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="设备合同"
      prop="ficilityContract"
      class="demo-ruleForm-item-long"
    >
      <el-upload
        drag
        action="http://47.106.144.138:8081/facility/fileUpload"
        class="uploadStyle"
        :on-success="
          (res) => {
            return handleExcelImportSuccess(res, 'ficilityContract');
          }
        "
        :limit="1"
        :before-remove="
          (res) => handleExcelImportRemove(res, 'ficilityContract')
        "
      >
        <div
          class="el-upload__text"
          style="height: 30px; padding: 0 !important"
        >
          拖拽到这里 或者 <em>点击这里</em> 上传
        </div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted, watch, nextTick } from "vue";
import equipmentHttp from "@/https/equipment.js";
import { ElMessage } from "element-plus";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import moment from "moment";
const emit = defineEmits(["closed"]);
let props = defineProps({
  currentEditInfo: {
    type: Object,
  },
});
let ruleForm = reactive({
  id: "",
  assetNumber: "",
  createTime: "",
  createUser: "",
  depId: "",
  facilityInstaller: "",
  facilityLevel: "",
  facilityLocations: "",
  facilityName: "",
  facilityNumbers: "",
  facilitySerialNumber: "",
  facilitySort: "",
  facilityState: "",
  facilitySupplier: "",
  ficilityContract: "",
  ficilityPhoto: "",
  franchising: "",
  guaranteeDueDate: "",
  guaranteeTime: "",
  instructionManual: "",
  maintenanceRecord: "",
  networking: "",
  operatingProcedure: "",
  partsParameters: "",
  purchasePrice: "",
  purchaseTime: "",
  remark: "",
  scrapDueDate: "",
  scrapTime: 0,
  specificationModel: "",
  standby: "",
  startTime: "",
  technicalParameter: "",
  twoDimensionalCode: "",
  unit: "",
  updateTime: "",
  updateUser: "",
});
const localTypeUnit = ref(Storage.localGet("depId"));
if (localTypeUnit.value == "1") {
  ruleForm.depId = "";
} else {
  ruleForm.depId = localTypeUnit.value;
}
const rules = ref({
  depId: [{ required: true, message: "请输入", trigger: "blur" }],
  facilityName: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
  facilitySort: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
  facilityLocations: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
});

const depIdList = ref([
  // { label: "公司", value: "1" },
  { label: "星沙厂", value: 2 },
  { label: "城西厂", value: 3 },
  { label: "城北厂", value: 4 },
  { label: "城南厂", value: 5 },
  { label: "城东厂", value: 6 },
]);
const facilityLevelList = ref([
  { label: "一级", value: "一级" },
  { label: "二级", value: "二级" },
  { label: "三级", value: "三级" },
]);
const facilityStateList = ref([
  { label: "在用", value: 1 },
  { label: "备用", value: 2 },
  { label: "维修", value: 3 },
  { label: "报废", value: 4 },
  { label: "其他", value: 5 },
]);
const facilitySortList = ref([]);
const depIdChange = () => {
  ruleForm.facilitySort = "";
  if (
    ruleForm.depId == "2" ||
    ruleForm.depId == "3" ||
    ruleForm.depId == "4" ||
    ruleForm.depId == "5"
  ) {
    getFacilitySort();
  }
};
onMounted(() => {
  if (
    ruleForm.depId == "2" ||
    ruleForm.depId == "3" ||
    ruleForm.depId == "4" ||
    ruleForm.depId == "5"
  ) {
    getFacilitySort();
  }
});
const getFacilitySort = () => {
  equipmentHttp.getFacilitySort(ruleForm.depId).then((res) => {
    facilitySortList.value = [];
    res.data.data.forEach((item) => {
      facilitySortList.value.push({
        label: item,
        value: item,
      });
    });
  });
};
const ruleFormRef = ref();
const editSubmit = () => {
  console.log(1);
  if (!ruleFormRef) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      ruleForm.guaranteeTime = ruleForm.guaranteeTime
        ? moment(ruleForm.guaranteeTime).format("YYYY-MM-DD")
        : "";
      ruleForm.scrapTime = ruleForm.scrapTime
        ? moment(ruleForm.scrapTime).format("YYYY-MM-DD")
        : "";
      ruleForm.startTime = ruleForm.startTime
        ? moment(ruleForm.startTime).format("YYYY-MM-DD")
        : "";
      ruleForm.purchaseTime = ruleForm.purchaseTime
        ? moment(ruleForm.purchaseTime).format("YYYY-MM-DD")
        : "";
      equipmentHttp.updateFacility(ruleForm).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data);
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          emit("closed");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
const handleExcelImportSuccess = (res, type) => {
  ruleForm[type] = res.data;
  console.log("1111112222333332222", ruleForm[type]);
};
const handleExcelImportRemove = (res, type) => {
  ruleForm[type] = "";
};

watch(
  () => props.currentEditInfo,
  (newVal, oldVal) => {
    console.log(newVal, ruleForm);
    nextTick(() => {
      for (let key in ruleForm) {
        ruleForm[key] = newVal[key];
      }
    });
  }
);
defineExpose({
  editSubmit,
});
</script>

<style scoped lang="less">
.demo-ruleForm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .demo-ruleForm-item {
    flex: 33%;
  }
  .demo-ruleForm-item-long {
    flex: 100%;
  }
}
.uploadStyle {
  height: 30px;
  padding: 0 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}
/deep/.el-upload-dragger {
  padding: 0 10px !important;
}
/deep/.el-upload-list__item-file-name {
  width: 175px !important;
}
</style>
